<html>
  <head>
    <title>$emit 和 $on</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <h2 class="title">
      <a href="../index.html" style="text-decoration: none; color: #2c3e50">>back</a>
    </h2>
    <div id="root">
      <button @click="boost">触发事件</button>
    </div>
    <script>
      new Vue({
        el: '#root',
        data() {
          return {
            message: 'hello vue',
          }
        },
        created() {
          this.$on(['my_events', 'my_events2'], this.handleEvents)
        },
        methods: {
          handleEvents(e) {
            console.log(this.message, e)
          },
          boost() {
            this.$emit('my_events', 'my params')
          },
        },
      })
    </script>
  </body>
</html>
